<template>
  <div class="jiagezhuizongtop">
    <div style="width: 99%; display: flex; height: 10%">
      <div class="jgzzdowmdiv2 jgzzflex jgzzleft" style="border: none">
        <p
          @click="getjgzzleft(0)"
          :class="isactive == 0 ? 'jgzzleftactive' : ''"
        >
          固定价
        </p>
        <p
          @click="getjgzzleft(1)"
          :class="isactive == 1 ? 'jgzzleftactive' : ''"
        >
          浮动价
        </p>
        <p
          @click="getjgzzleft(2)"
          :class="isactive == 2 ? 'jgzzleftactive' : ''"
        >
          费率报价
        </p>
      </div>
      <div class="jgzzdowmdiv2 jgzzflex" style="width: 80%">
        <div class="flexclassaround" style="width: 21%; height: 100%">
          <p style="font-size: 0.7rem" class="lable">物料大类:</p>

          <div class="myselectjgzz" style="flex: 1">
            <Select
              v-if="wldllist.length > 0"
              v-model="criteria1"
              clearable
              placeholder="请选择"
              @change="openwldl"
              @visible-change="mouseClick"
            >
              <el-option
                v-for="item in wldllist"
                :key="item.materialclasscode"
                :label="item.title"
                :value="item.materialclasscode"
              >
              </el-option>
            </Select>
            <Select
              v-else
              clearable
              placeholder="请选择"
              @change="openwldl"
              @visible-change="mouseClick"
            >
              <el-option
                v-for="item in wldllist"
                :key="item.materialclasscode"
                :label="item.title"
                :value="item.materialclasscode"
              >
              </el-option>
            </Select>
            <div class="lineheng" style="position: absolute; bottom: 0"></div>
          </div>
        </div>
        <div class="flexclassaround" style="width: 21%">
          <p style="font-size: 0.7rem" class="lable">物料二级分类:</p>
          <div class="myselectjgzz" style="flex: 1">
            <Select
              v-model="criteria2"
              clearable
              placeholder="请选择"
              @change="openwlel"
              @visible-change="mouseClick"
            >
              <el-option
                v-for="item in wlellist"
                :key="item.materialclasscode"
                :label="item.title"
                :value="item.materialclasscode"
              >
              </el-option>
            </Select>
            <div class="lineheng"></div>
          </div>
        </div>

        <div class="flexclassaround" style="width: 21%">
          <p style="font-size: 0.7rem" class="lable">物料三级分类:</p>
          <SeleceTree
            :treeData="wlsllist"
            :info="criteria3"
            :title="criteriatext3"
            :defaultProps="optionProps"
            catetype="2"
            style="flex: 1"
            @getChildValue="getChildValue"
          />
        </div>
        <div class="flexclassaround" style="width: 26%; height: 100%">
          <p style="font-size: 0.7rem; display: flex" class="lable">时间:</p>
          <div class="custom3">
            <div class="time">
              <el-date-picker
                :picker-options="pickerOptions0"
                v-model="criteria4[0]"
                type="date"
                :editable="false"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
                @focus="handleOperation(true)"
                @blur="handleOperation(false)"
              >
              </el-date-picker>
              <span style="line-height: 40px">-</span>
              <el-date-picker
                :picker-options="pickerOptions1"
                v-model="criteria4[1]"
                type="date"
                :editable="false"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
                @focus="handleOperation(true)"
                @blur="handleOperation(false)"
              >
              </el-date-picker>
              <div
                class="icon"
                :class="rotate ? 'transform180' : 'transform0'"
              ></div>
            </div>
            <!-- <dataPicker
              v-model="criteria4"
              type="daterange"        
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :editable="false"
              clearable
              value-format="yyyy-MM-dd"
              prefix-icon="el-icon-caret-bottom"
              rotateable
            /> -->
            <div
              style="
                height: 0.1rem;
                border-bottom: 1px solid #0054f9;
                width: 90%;
                margin: 0 auto;
                margin-top: -0.1rem;
              "
            ></div>
          </div>
        </div>
        <div style="width: 7%" @click="srarchbtnjgzz()">
          <el-button
            v-debounce
            round
            style="background-color: #0000ff;color: white;width: 100%; height: 1.5rem; padding: 0"
            size="mini"
            >查询</el-button
          >
        </div>
      </div>
    </div>
    <div class="jgzzdowmdiv3" style="height: 82%; position: relative">
      <div style="width: 100%; height: 100%">
        <Tablecomponents
          :tableData="tableData"
          :currentPage="currentPage"
          :headerlist="jgzzechartslist"
          :isactive="isactive"
          :time="criteria4"
        />
      </div>
      <!-- <div class="tablekuang" v-if="tableData.length > 0"></div> -->
      <el-pagination
        background
        align="center"
        @current-change="goodspagechange"
        :current-page="currentPage"
        page-size="10"
        layout="total,prev,pager,next,jumper"
        :total="total"
        style="margin-top: 5px"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Dialog from "@/components/dialog.vue";
import SeleceTree from "@/components/selece-tree.vue";
import Tablecomponents from "@/components/tablecomponents.vue";
import { timestampToTime1 } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";

export default {
  props: {},
  components: {
    Dialog,
    SeleceTree,
    Tablecomponents,
    YYDatePick,
    dataPicker,
    Select,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.criteria4[1]) {
            return time.getTime() > new Date(this.criteria4[1]).getTime();
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.criteria4[0]).getTime() ;
        },
      },
      tableH: "100%",
      optionProps: {
        value: "materialclasscode",
        label: "title",
        children: "children",
      },
      rotate: false,
      wldllist: [],
      wlellist: [],
      wlsllist: [],
      isactive: 2,
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPage: 1, //当前页
      szjythirdpopvisiable: false,
      szjythirdpopvisiablebig: false,
      poptitle: "价格追踪",
      total: 0,
      criteria1: "",
      criteria2: "",
      criteria3: "",
      yubeicriteria3: "",
      criteria4: timestampToTime1(),
      icon: require("@/assets/shuzijiaoyipopupbottomdown.png"),
      tableData: [],
      jgzzechartslist: [
        "最新报价/(%)",
        "最低报价/(%)",
        "最高报价/(%)",
        "平均浮动比例/(%)",
      ],
      prevdata: {},
      criteriatext3: "",
      clickshow: false,
      dangqianye: 0,
      timer: null,
    };
  },
  watch: {
    criteria1: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal, "newVal, oldVal");
        // if(!newVal){

        // }
        // if(newVal,oldVal){

        // }
        this.dangqianye = 1;
        this.criteria2 = "";
        this.criteria3 = "";
        this.wlellist = [];
        this.wlsllist = [];
      },
      deep: true,
    },
    criteria2: {
      handler(newVal, oldVal) {
        this.dangqianye = 1;
        this.criteria3 = "";
        this.wlsllist = [];
      },
      deep: true,
    },
    criteria3(newVal, oldVal) {
      this.dangqianye = 1;
      if (!newVal || newVal == undefined) {
        this.criteria3 = "";
        this.criteriatext3 = "";
      }
    },
    criteriatext3() {
      this.dangqianye = 1;
    },
  },
  mounted() {
    this.getmatClassify({ offerType: this.isactive + 1 }, 1);
    setTimeout(() => {
      this.getjgzzleft(2);
    }, 500);
  },
  methods: {
    handleOperation(e) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.rotate = e;
      }, 150);
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    getChildValue(val) {
      this.criteria3 = val.value;
      this.criteriatext3 = val.title;
    },
    srarchbtnjgzz(prevdata) {
      this.tableData = [];
      // if (this.criteria3.length > 0 ) {
      //   this.criteria3 = this.criteria3[this.criteria3.length - 1];
      // }else if(this.criteria3 != null && this.criteria3.length() != 0){
      //   this.criteria3 = this.criteria3;
      // }else{
      //   this.criteria3 = ""
      // }

      this.currentPage = this.dangqianye;

      let data = {};

      if (prevdata) {
        data = prevdata;
      } else {
        let criteriacode = "";
        // jgzztabindex  0固定价  1  浮动价  2费率
        if (this.criteria3) {
          criteriacode = this.criteria3;
        } else if (this.criteria2) {
          criteriacode = this.criteria2;
        } else {
          criteriacode = this.criteria1;
        }
        if (this.criteria4 != null) {
          data = {
            startDate: this.criteria4[0],
            endDate: this.criteria4[1],
            matCode: criteriacode,
            pageNum: this.currentPage,
            pageSize: 10,
          };
        } else {
          data = {
            matCode: criteriacode,
            pageNum: this.currentPage,
            pageSize: 10,
          };
        }

        // if(this.criteria4){
        //   data['startDate'] = this.criteria4[0]
        //   data['endDate'] = this.criteria4[1]
        //   // startDate: this.criteria4[0],
        //   // endDate: this.criteria4[1],
        // }
      }

      if (this.isactive == 0) {
        APIS.Jgzz.fixedPriceCollect(data).then((res) => {
          if (res.data.items.length > 0) {
            this.tableData = res.data.items;
          }
          this.total = res.data.total;
          this.prevdata = data;
        });
      } else if (this.isactive == 1) {
        APIS.Jgzz.floatPriceCollect(data).then((res) => {
          if (res.data.items.length > 0) {
            this.tableData = res.data.items;
          }
          this.total = res.data.total;
          this.prevdata = data;
        });
      } else {
        APIS.Jgzz.ratePriceCollect(data).then((res) => {
          if (res.data.items.length > 0) {
            this.tableData = res.data.items;
          }
          this.total = res.data.total;
          this.prevdata = data;
        });
      }
    },
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children 若为空数组，则将 children 设为undefined
          data[i].children = undefined;
        } else {
          // children 若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getmatClassify(data1, num) {
      APIS.Baseapi.matClassify(data1)
        .then((res) => {
          if (num == 1) {
            this.wldllist = res.data;
          } else if (num == 2) {
            this.wlellist = res.data;
          } else {
            this.wlsllist = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmat(data1) {
      APIS.Baseapi.mat(data1)
        .then((res) => {
          this.wlsllist = res.data;
          // this.wlsllist = this.getTreeData(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    openwldl(val) {
      let obj = this.wldllist.filter((item) => item.materialclasscode == val);
      this.getmatClassify(
        {
          pid: obj[0].materialclassid,
          materialclasscode: obj[0].materialclasscode,
          offerType: this.isactive + 1,
        },
        2
      );
    },
    openwlel(val) {
      let obj = this.wlellist.filter((item) => item.materialclasscode == val);
      this.getmat(
        {
          pid: obj[0].materialclassid,
          materialclasscode: obj[0].materialclasscode,
        },
        3
      );
    },
    getjgzzleft(index) {
      // 0 固定价 1 浮动价 2 费率报价
      this.dangqianye = 1;
      this.getmatClassify({ offerType: index + 1 }, 1);
      this.isactive = index;

      this.criteria2 = "";
      this.criteria3 = "";

      if (index == 0) {
        this.jgzzechartslist = [
          "最新中标价(元)",
          "最低中标价(元)",
          "最高中标价(元)",
          "中标均价(元)",
        ];
        this.getmatClassify(
          { pid: "", materialclasscode: "", offerType: this.isactive + 1 },
          2
        );
        this.criteria1 = "";
        this.criteria2 = "";
        this.criteria3 = "";
      } else if (index == 1) {
        this.jgzzechartslist = [
          "最新浮动价(元)",
          "最低浮动价(元)",
          "最高浮动价(元)",
          "浮动均价(元)",
        ];
        this.getmatClassify(
          {
            pid: "665f644e43731ff9db3d341da5c827e1",
            materialclasscode: "01",
            offerType: this.isactive + 1,
          },
          2
        );
        this.criteria1 = "01";
        this.criteria2 = "";
        this.criteria3 = "";
      } else if (index == 2) {
        this.jgzzechartslist = [
          "最新报价/(%)",
          "最低报价/(%)",
          "最高报价/(%)",
          "平均浮动比例/(%)",
        ];
        this.getmatClassify(
          {
            pid: "b38e5ff5f816ac6e4169bce9314b2996",
            materialclasscode: "80",
            offerType: this.isactive + 1,
          },
          2
        );
        this.criteria1 = "80";
      }
      this.srarchbtnjgzz();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    goodspagechange(e) {
      this.dangqianye = e;
      this.prevdata.pageNum = e;
      this.srarchbtnjgzz(this.prevdata);
    },
    clickchange(e) {
      if (this.clickshow) {
        //展示
        document.documentElement.style.setProperty("--contenttypejgzz", "0deg");
      } else {
        //隐藏
        document.documentElement.style.setProperty(
          "--contenttypejgzz",
          "180deg"
        );
      }
      this.clickshow = !this.clickshow;
    },
  },
};
</script> 
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
// ::v-deep .style4 {
//   .el-range-editor {
//     width: 100%;
//     margin-left: 0.5rem;
//   }
//   .el-icon-caret-bottom:before {
//     content: "▼";
//     font-size: 14px;
//     color: #0054f9;
//   }
//   .el-range__icon {
//     width: 1.2rem;
//     height: 1.2rem;
//     position: absolute;
//     // top: 50%;
//     margin-left: calc(100% - 1.6rem);
//     // transform: translate(-50%, -50%);
//   }
//   .el-input__inner {
//     font-family: JCYT;
//     border: none;
//     // border-bottom: 0.05rem solid #0000ff;
//     background-color: transparent;
//     // height: 1.3rem;
//     padding-left: 0.5rem;
//     position: relative;
//     font-size: 0.8rem;
//   }
//   .el-range-input {
//     background: transparent;
//   }
//   .el-input__icon {
//     line-height: 0.3rem;
//     margin-right: 0.4rem;
//     width: 1rem;
//     height: 1rem;
//   }
//   .el-range-separator {
//     display: flex;
//     align-items: center;
//     justify-content: space-around;
//     color: #0054f9;
//   }
//   .el-range__close-icon {
//     line-height: 0.3rem;
//   }
// }
::v-deep .custom3 {
  // height: 1.2rem;
  width: calc(100% - 2rem);

  .time {
    .transform180 {
      transform: rotate(180deg);
      transition: all 0.5s;
    }
    .transform0 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
    .icon {
      display: flex;
      align-items: center;
    }
    .icon::before {
      content: "▼";
      font-size: 12px;
      color: #0054f9;
    }
    display: flex;
    align-content: center;

    .el-input__prefix {
      display: none;
    }
    .el-input__inner {
      padding: 0 1rem;
      font-family: JCYT;
      border: none;
      background-color: transparent;
      position: relative;
      font-size: 0.8rem;
    }
    .el-range-editor .el-range-input {
      background-color: transparent;
    }
    .el-date-editor .el-range__close-icon {
      margin-right: 0.5rem;
    }
  }
}

.jiagezhuizongtop {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  overflow: hidden;
  font-size: 1rem;
  padding-top: 1%;
  .info {
    width: 20%;
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.8rem;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
  .info2 {
    display: flex;
    align-items: center;
    padding: 0.5rem 2rem 0.8rem 0;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
  .jgzzleft {
    width: 18%;
    margin-right: 1%;
    background-color: #0054f9;
    color: white;
    font-size: 0.7rem;
  }
  .jgzzleft > p {
    display: inline-block;
    border-radius: 20px;
    padding-left: 5%;
    padding-right: 5%;
    color: white;
    cursor: pointer;
  }

  .jgzzleftactive {
    background-color: white;
    color: #0054f9 !important;
  }
}
::v-deep .public {
  .el-input__prefix {
    border: none;
  }
  .el-input__inner {
    .el-input__icon {
      display: none;
    }
    border: none;
    border-radius: 0;
    background-color: rgba(237, 241, 249, 1);
    color: #192c55;
  }
  .el-select__caret {
    color: #192c55 !important;
  }
}

::v-deep .el-button {
  background-color: #0000ff;
  color: white;
}

// 水平位移动画
.transition-t {
  transform: translate(0, -100%);
  transition: all 1s;
}
.transition-b {
  transform: translate(0, 0);
  transition: all 1s;
}
.tablekuang {
  height: 90%;
  width: 52%;
  border: 1px solid #949eb4;
  // background-color:rgba(225, 234, 249,.9);
  border-top: none;
  position: absolute;
  right: 0.7%;
  top: 10%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 4;
}
.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}
::v-deep .myselectjgzz {
  width: 100%;
  position: relative;

  .el-icon-arrow-up:before {
    content: "▲";
    color: #0054f9;
  }
  .el-input__inner {
    font-family: JCYT;
    border: none;
    background-color: transparent;
    border-radius: 0;
  }
  .el-input {
    font-size: 0.8rem;
  }
  /* .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 10px);
  } */
}
</style>
<style >
</style>
